<template>
	<view class="content">
		<image :src="main.LinkImage" mode="aspectFill" class="thImg"></image>
		<view class="title fs18 color3 font-weight">
			{{main.Title}}
			<button class="float-r text-center fex" open-type="share" v-show="isMpweixin">
				<image :src="moreicon" mode="aspectFill" class="header-img"></image>
				<!-- <view class="fs12 color9">分享</view> -->
			</button>
		</view>

		<view class="contents clear-both">
			<view :class="['shopping','float-l',{shopping0:index%2!=0}]" v-for="(item,index) in commodityList" :key="index">
				<image :src="item.ImageSrc" mode="aspectFill" class="shopImg" @tap="navigatorTo(item.Href)"></image>
				<view class="shopName fs14 color3 text-over">{{item.CommodityName}}</view>
				<view class="shopInfo fs12 color9">{{item.Remarks}}</view>
				<view class="footer clear-both">
					<view class="float-l footers">
						<text class="fs16 colorm">¥{{item.DiscountPrice?item.DiscountPrice:item.UnitPrice}}</text>
						<text class="fs14 color9">/{{item.Size}}</text>
					</view>
					<view class="float-r footers" @tap="openCartBox(item)">
						<image src="/static/tabbar/index/goods_fill.png" class="footerImg"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="shopcar_btn" @tap="navigatorTo('/pages/tabBar/index')">
			<image src="/static/tabbar/index/homepage.png" mode="aspectFill" class="publish_fill"></image>
		</view>
		<!--购物车弹窗-->
		<view class="main" v-show="showCartBox">
			<view class="white-box">
				<view v-for="(box,idx) in packageList" :key="idx" v-show="box.PackageName==choosepackagename">
					<image src="/static/tabbar/index/close.png" mode="aspectFill" class="colose-img" @tap="closeCartBox"></image>
					<view class="header clear-both">
						<image :src="box.ImagrUrl" mode="aspectFill" class="float-l cake-img"></image>
						<view class="float-l cakeinfo">
							<view>
								<text class="fs20 colorm font-weight">¥{{box.DiscountPrice||box.UnitPrice}}</text><text class="fs14 color9">/{{box.Size}}</text>
							</view>
							<view class="fs16 color3 font-weight cake-name"><text>{{box.CommodityName}}</text></view>
							<view class="fs14">
								<text class="colorFF6">已选择：</text>
								<text class="color6">{{box.PackageName}}</text>
							</view>
						</view>
					</view>
					<view class="guige clear-both">
						<view class="fs16 font-weight color3">规格</view>
						<view class="fs12 item float-l " v-for="(s,index) in box.PackageNameList" :key="index" :class="{'choose':s==choosepackagename}"
						 @tap="chooseCartBox(s)">{{s}}</view>
					</view>
					<view class="num clear-both">
						<view class="float-l fs16 font-weight color3">数量</view>
						<view class="float-r clear-both">
							<view class="float-l fs20 color6 options" @tap="updateCartNum(box,-1)">-</view>
							<view class="float-l fs14 color3 nums">{{box.Num}}</view>
							<view class="float-l fs20 colorFF6 options options2" @tap="updateCartNum(box,1)">+</view>
						</view>
					</view>
					<view class="bigview clear-both">
						<view class="shopcar_btns float-l text-center" @tap="goHref('/pages/tabBar/cart')">
							<image src="/static/tabbar/index/publish2.png" mode="aspectFill" class="shopcar_btn_img"></image>
							<view class="fs14 color9">购物车</view>
							<view class="dot fs12 text-over">{{cartNum}}</view>
						</view>
						<view class="done fs18 font-weight  float-l" @tap="addTocart(box)">加入购物车</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script src="../../api/subject/subject_item.js">

</script>

<style lang="scss" scoped="true">
	.content {
		.thImg {
			width: 100%;
			height: 53.335vw;
			display: block;
		}

		.title {
			margin: 4.2667vw 0;
			text-align: center;
			position: relative;
		}

		.contents {
			.shopping {
				width: 44vw;
				margin: 0 4vw 6.4vw 4vw;

				.shopImg {
					width: 100%;
					height: 44vw;
					display: block;
				}

				.shopName {
					width: 100%;
					margin-top: 2.667vw;
					margin-bottom: .5vw;
				}

				.shopInfo {
					width: 100%;
					height: 13vw;
					overflow: hidden;
				}

				.footer {
					margin-top: 3.2vw;
					height: 5.8667vw;
					line-height: 5.8667vw;
					width: 100%;

					.footers {
						height: 100%;

						.footerImg {
							width: 5.8667vw;
							height: 5.8667vw;
							display: block;
						}
					}

				}
			}

			.shopping0 {
				margin-left: 0;
			}
		}

		.main {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
			background: rgba(0, 0, 0, 0.5);

			.white-box {
				min-height: 107vw;
				background: #fff;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				border-top-left-radius: 4.2667vw;
				border-top-right-radius: 4.2667vw;
				overflow: hidden;
				padding-bottom: 13.8667vw;
				animation: height .4s;

				.colose-img {
					position: absolute;
					width: 5.8667vw;
					height: 5.8667vw;
					right: 4.2667vw;
					top: 4.2667vw;
					z-index: 10;
				}

				.header {
					height: 26.667vw;
					margin: 0 4.2667vw;
					padding: 5.334vw 0;
					border-bottom: 2upx solid #f2f2f2;

					.cake-name {
						margin: 1vw 0;
					}

					.cake-img {
						height: 26.667vw;
						width: 26.667vw;
						margin-right: 3vw;
					}

					.cakeinfo {
						height: 26.667vw;
						width: 61.6vw;
					}
				}

				.guige {
					margin: 0 4.2667vw;
					padding: 5.334vw 0;
					border-bottom: 2upx solid #f2f2f2;

					.item {
						height: 7.4667vw;
						line-height: 7.4667vw;
						border-radius: 3.7334vw;
						background: #f2f2f2;
						color: #666;
						padding: 0 4.8vw;
						margin-top: 3.2vw;
						margin-right: 2.1334vw;
					}

					.choose {
						background: #E5ECF5;
						color: #00449F;
					}

					.unchoose {
						color: #BCBCBC;
					}
				}

				.num {
					height: 6.4vw;
					margin: 4vw 4.2667vw 8.5334vw 4.2667vw;
					line-height: 6.4vw;

					.options {
						width: 6.4vw;
						height: 6.4vw;
						border: 2upx solid #e7e7e7;
						text-align: center;
						border-top-left-radius: .8vw;
						border-bottom-left-radius: .8vw;
					}

					.options2 {
						border-radius: 0;
						border-top-right-radius: .8vw;
						border-bottom-right-radius: .8vw;
					}

					.nums {
						width: 10.667vw;
						text-align: center;
						border-top: 2upx solid #e7e7e7;
						border-bottom: 2upx solid #e7e7e7;
						height: 6.4vw;
						line-height: 6.4vw;
					}
				}

				.bigview {
					position: absolute;
					bottom: 0;
					left: 0;

					.shopcar_btns {
						width: 20vw;
						background: #fff;
						height: 13.8667vw;
						position: relative;

						.shopcar_btn_img {
							width: 8vw;
							height: 8vw;
							display: block;
							margin: 0 auto;
							margin-top: 1vw;
							margin-bottom: -1vw;
						}

						.dot {
							background: #CC2825;
							color: #fff;
							position: absolute;
							width: 5vw;
							height: 5vw;
							text-align: center;
							line-height: 5vw;
							right: 4vw;
							top: 0;
							border-radius: 50%;
							z-index: 2;
						}
					}

					.done {
						height: 13.8667vw;
						line-height: 13.8667vw;
						text-align: center;
						width: 80vw;
						color: #fff;
						background: #00449F;
					}

					.nodone {
						color: rgba(255, 255, 255, .5);
					}
				}

			}
		}

		.shopcar_btn {
			width: 10.667vw;
			height: 10.667vw;
			border-radius: 50%;
			position: fixed;
			right: 3vw;
			bottom: 10vw;
			z-index: 9;
			box-shadow: 0 4upx 8upx 0 rgba(0, 68, 159, 0.33);
			background: #00449F;

			.publish_fill {
				width: 6.667vw;
				height: 6.667vw;
				display: block;
				margin: 2vw auto;
			}
		}

		@keyframes height {
			from {
				bottom: -100%;
			}

			to {
				bottom: 0;
			}
		}

		.fex {
			margin-right: 4.2667vw;
			line-height: 6vw;
			background-color: #fff;
			padding: 0;
			position: absolute;
			right: 0;
			top: 0vw;
		}

		.fex::after {
			border: none;
			outline: none;
		}

		.header-img {
			width: 7.4667vw;
			height: 7.4667vw;
			display: block;
		}
	}
</style>
